<template>
  <div class="cartControl">
    <span class="icon cart-minus" v-if='count' @click.stop="minusThisGood">
      <i class="el-icon-minus">-</i>
    </span>
    <span class="num" v-if='count'>
      {{count}}
    </span>
    <span class="icon cart-add" @click.stop="addThisGood">
      <i class="el-icon-plus">+</i>
    </span>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  props: {
    goodId: '',
  },
  data() {
    return {
      count: ''
    }
  },
  computed: {
    order() {
      return this.$store.state.order
    }
  },
  mounted() {
    this.count = this.order[`good-${this.goodId}`]
  },
  methods: {
    addThisGood() {
      this.$store.commit('changeNumOfGoodOrdered', { type: 'add', goodId: `good-${this.goodId}` })
      this.count = this.$store.state.order[`good-${this.goodId}`]
      this.$emit('getOrder')
    },
    minusThisGood() {
      this.$store.commit('changeNumOfGoodOrdered', { type: 'minus', goodId: `good-${this.goodId}` })
      this.count = this.$store.state.order[`good-${this.goodId}`]
      this.$emit('getOrder')
    }
  }
}
</script>
<style lang="less" scoped>
.cartControl {
  display: flex;
  .num {
    display: flex;
    align-items: center;
    font-size: 14px;
    // min-width: 15px;
    justify-content: center;
  }
  .icon {
    color: #fff;
    background-color: #00a0dc;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &.cart-add {
      margin-left: 5px;
    }
    &.cart-minus {
      margin-right: 5px;
    }
  }
}
</style>
